<template>
  <div class="home">
    <header class="header">
       <el-avatar :size="120" :src="headerUrl" @error="errorHandler">
        <img :src="errorImgUrl"/>
      </el-avatar>
      <h1>牛牛的大蛋糕</h1>
      <h4>🍭 欢迎来到 *ZENG CHENG* 的个人主页</h4>
      <a href="https://gitee.com/lovezengcheng" class="btn-view">View on Gitee</a>
    </header>
    <MenuList :menuData="menuData" @toChangeMenu="toChangeMenu">
      <el-avatar :size="80" :src="headerUrl" @error="errorHandler">
        <img :src="errorImgUrl"/>
      </el-avatar>
    </MenuList>
    <div class="content markdown-body" v-highlight>
      <!-- 阿里音乐播放器 -->
      <div id="aplayer" ref="aplayer"></div>
      <!-- 内容组件 -->
      <keep-alive>
        <component :is="currView" />
      </keep-alive>
    </div>
     <div class="footer-img">
      <img src="@/assets/images/footer.png" />
    </div>
    <!--内容部分 end-->
    <footer class="site-footer">
      <span><el-image style="width: 300px; height: 300px" :src="ewmImg" fit="cover"></el-image></span>
      <span>🐧 QQ： <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=631625714&site=qq&menu=yes">631625714</a></span>
      <span>📬 E-mail： <a target="_blank" href="mailto:www.zc125678@163.com">www.zc125678@163.com</a></span>
       <span>📚 简书地址： <a target="_blank" href="https://www.jianshu.com/u/82380863e1b0">https://www.jianshu.com/u/82380863e1b0</a></span>
      <span class="site-footer-owner">👩🏻‍💻 <a href="http://lovezengcheng.gitee.io">Niu Niu DE DA DAN GAO</a> is maintained by <a href="#none" @click="dialogVisible= true">ChengZeng [个人简历]</a>.</span>
    </footer>
    <!-- 彩带 -->
    <EvanYouCanvas />
    <!-- 到顶部 -->
    <el-button v-show="goTopShow" type="primary" circle @click="goTopBtn" class="go-top">🛧</el-button>
    <ul class="left-float"><li><a target="_blank" href="http://lovezengcheng.gitee.io/baidumap-getpoint/">🗺️ 📍 百度地图取点小工具</a></li></ul>
    <!-- 弹出个人简历 -->
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <div class="markdown-body dialog-content" v-highlight id="js-pdf-html"><ReadMe /></div>
      <div class="dialog-btn"><a href="./WebDeveloper.pdf" target="_blank" download="zengcheng_WebDeveloper.pdf"><el-button type="success" size="medium" round>下载简历</el-button></a></div>
    </el-dialog>
  </div>
</template>

<script>
import MenuList from '@/components/MenuList'
import EvanYouCanvas from '@/components/EvanYouCanvas'
import { menuData } from '@/assets/menuData'
import { myloveLrc, cantstoploveLrc } from '@/assets/musicLrc'
import ReadMe from '@/blogViews/readme.md'
import APlayer from 'aplayer'
export default {
  name: 'Home',
  components:{
    MenuList,
    EvanYouCanvas,
    ReadMe
  },
  data(){
    return {
      menuData,
      errorImgUrl: require('@/assets/images/error_img.png'),
      headerUrl: require('@/assets/images/pop.jpg'),
      ewmImg: require('@/assets/images/ewm.png'),
      currView: '',
      timer: null,
      goTopShow: false,
      aliOptions:{
        container: null,
        fixed: false,
        lrcType: 1,
        theme: '#f00',
        autoplay: true,
        audio: [{
          name: 'My Love',
          artist: 'westlife',
          url: require('@/assets/music/My_Love.mp3'),
          cover: require('@/assets/images/mylove.jpg'),
          lrc: myloveLrc
        }, {
          name: 'Can\'t Stop Love',
          artist: 'Darin',
          url: require('@/assets/music/Cant_Stop_Love.mp3'),
          cover: require('@/assets/images/cantstoplove.jpg'),
          lrc: cantstoploveLrc
        }]
      },
      dialogVisible: false
    }
  },
  created(){
    // 动态加载页面components
    this.menuData.forEach((item,index)=>{
      const num = this.menuData.length - index
      this.$options.components[`viewName_${num}`] = require(`@/blogViews/${num}.md`).default
    })
    // 默认展示第一篇文章
    this.currView = `viewName_${this.menuData[0].viewName}`
  },
  mounted(){
    // 阿里音乐
    this.aliOptions.container = this.$refs.aplayer
    new APlayer(this.aliOptions)
    window.addEventListener('scroll', this.handleScroll)
  },
  methods:{
    errorHandler() {
      return true
    },
    // 接受子组件导航切换
    toChangeMenu(item){
      this.currView = `viewName_${item.viewName}`
    },
    // 滚动事件
    handleScroll(){
      let scrollTop = document.documentElement.scrollTop
      if (scrollTop > 500){
        this.goTopShow = true
        // aplayer aplayer-withlist aplayer-fixed aplayer-narrow
        document.getElementById('aplayer').className = 'aplayer aplayer-withlist aplayer-fixed aplayer-narrow'
      } else {
        this.goTopShow = false
        // aplayer aplayer-withlrc aplayer-withlist
        document.getElementById('aplayer').className = 'aplayer aplayer-withlrc aplayer-withlist'
      }
    },
    // 滚动到顶部
    goTopBtn(){
      // console.log(this.$options)
      let scroll_Top = document.documentElement.scrollTop
      const that = this
      clearInterval(that.timer)
      if (scroll_Top > 0) {
        that.timer = setInterval(function () {
            let speed = (0 - scroll_Top) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
            scroll_Top = scroll_Top + speed;  
            document.documentElement.scrollTop = scroll_Top;
            if (scroll_Top <= 0) {
              clearInterval(that.timer)
            }
        }, 30)
      }
    }
  }
}
</script>
<style lang="scss">
.aplayer.aplayer-fixed{
  z-index: 300 !important;
}
</style>
<style lang="scss" scoped>
.home{
  .dialog-btn{
    padding-top: 20px;
    text-align: center;
  }
  .dialog-content{
    border-bottom: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    max-height: 60vh;
    overflow: auto;
    ::v-deep{
      blockquote{
        padding: 1em 1em;
        background: #f2f2f2;
      }
      p{
        line-height: 2em;
      }
      section{
        p:nth-child(6){
          background: #4e5e69;
          color: #fff;
          padding: 20px 10px;
          a{
            color: #00ce6f;
          }
        }
      }
    }
  }
  .content{
    min-height: calc(100vh - 600px);
    width: 80%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
  }
  #aplayer{
    ::v-deep{
      .aplayer-pause,.aplayer-play{
        width: 30px!important;
        height: 30px !important;
        svg{
          width: 20px !important;
          height: 20px !important;
        }
      }
      .aplayer-fixed{
        .aplayer-button{
          right: 50% !important;
          bottom: 50% !important;
          margin: 0 -8px -15px 0 !important;
        }
        .aplayer-lrc{
          display: none !important;
        }
      }
    }
  }
  .go-top{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 200;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }
  ul.left-float{
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 200;
    li{
      a{
        display: block;
        padding: 10px 20px;
        border-radius: 20px 0 0 20px;
        color: #fff;
        background: rgba(0,0,0,0.7);
        font-size: 12px;
        text-decoration: none;
        opacity: 0.8;
        transition: all 0.5s;
      }
      a:hover{
        margin-right: 10px;
        border-radius: 20px;
        background: rgba(0,0,0,0.9);
        opacity: 1;
      }
    }
  }
}
.header{
  text-align: center;
  color: #fff;
  padding: 100px 0;
  background: url('~@/assets/images/header_bg.jpg') center center no-repeat;
  background-size: cover;
  ::v-deep span{
    border: 3px solid rgba(0,0,0,0.2);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }
  h1{
    padding-bottom: 10px;
    font-size: 36px;
  }
  h4{
    opacity: 0.8;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 10px;
  }
  .btn-view{
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #788da2;
    background: rgba(255,255,255,0.2);
    color: #788da2;
    display: inline-block;
    text-decoration: none;
    &:hover{
      color: #333;
      border: 1px solid #333;
      background: rgba(255,255,255,0.7);
    }
  }
}
.footer-img{
	text-align: center;
	margin-bottom: -78px;
}
.site-footer {
	background: #333;
	text-align: center;
	color: #d5d5d5;
  padding: 60px 0;
  span{
    display: block;
    padding-bottom: 5px;
  }
  a {
    color: #00ce6f;
  }
  a:hover{
    text-decoration: underline;
  }
}
@media screen and (max-width: 1020px) {
  .footer-img{
    margin-bottom: -38px;
    img{
      width: 460px;
    }
  }
  .home{
    ::v-deep #evanyou-canvas{
      display: none;
    }
  }
}

@media screen and (max-width: 460px) {
  ul.left-float{
    display: none;
  }
  .footer-img{
    margin-bottom: -28px;
    img{
      width: 320px;
    }
  }
  .home{
    ::v-deep #evanyou-canvas{
      display: none;
    }
  }
}
  
</style>
